<template>
  <div>
    <div class="help-components">
      <Header :isGoBack="false">
        <template v-slot:right>
          <div class="btn" @click="goStudyIndex">返回首页</div>
        </template>
      </Header>
      <div class="container w1200">
        <div class="info-main">
          <div class="info-box">
            <div class="help-container container">
              <div class="help-aside">
                <div class="help-aside-logo">
                  <!-- <img src="@/assets/img/logo-vertical-color.png" alt /> -->
                  <img style="height:50px; margin:20px 0px" src="@/assets/img/晓果logo2.svg" />
                </div>
                <div
                  class="el-collapse-item__header help-hot"
                  :class="!checkClassifId ? 'help-checked-classif' : ''"
                  @click="checkHotPro"
                >
                  热门问题
                </div>
                <el-collapse v-model="activeName" accordion>
                  <el-collapse-item :name="menu.id + ''" v-for="menu in menus" :key="menu.id">
                    <template slot="title">
                      <i v-show="activeName !== menu.id + ''" class="header-icon el-icon-plus"></i>
                      <i v-show="activeName === menu.id + ''" class="header-icon el-icon-minus"></i>
                      {{ menu.name }}
                    </template>
                    <div
                      class="help-aside-classif"
                      :class="classif.id == checkClassifId ? 'help-checked-classif' : ''"
                      v-for="classif in menu.children"
                      :key="classif.id"
                      @click="checkClassif(menu.id, classif.id)"
                    >
                      {{ classif.name }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
              <div class="help-main">
                <div class="search-problem">
                  <el-autocomplete
                    class="inline-input"
                    v-model="searchStr"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入搜索关键词"
                    @select="handleSelect"
                  ></el-autocomplete>
                </div>
                <div class="problem-list">
                  <el-collapse v-model="activeNames">
                    <el-collapse-item
                      :name="problem.id"
                      v-for="problem in problems"
                      :key="problem.id"
                    >
                      <template slot="title">{{ problem.title }}</template>
                      <!-- ql-container -->
                      <div class="ql-snow">
                        <div class="ql-editor html-style" v-html="problem.answer"></div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { menus2 } from "@/assets/js/questionList";
import { getHelp } from "@/api/student";
import Header from "@/components/Header";
export default {
  name: "webHelp",
  data() {
    let type = "stu";
    let filterMean = menus2.filter((item) => {
      item.children = item.children.filter((classif) => {
        return classif.show.indexOf(type) >= 0;
      });
      return item.children.length > 0;
    });
    return {
      menus: filterMean,
      problems: [],
      activeName: "",
      activeNames: [],
      checkedQ: {},
      checkClassifId: "",
      checkedTypeId: "",
      searchStr: "",
    };
  },
  computed: {},
  components: { Header },
  methods: {
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    getHotHelp() {
      let data = {
        isHotspot: 1,
      };
      getHelp(data).then((res) => {
        if (res.code == 200 && res.data) {
          this.problems = res.data.filter((item) => {
            let tIndex = -1;
            let cIndex = -1;
            tIndex = this.menus.findIndex((mean) => {
              return mean.id == item.piece;
            });
            if (tIndex >= 0) {
              cIndex = this.menus[tIndex].children.findIndex((mean) => {
                return mean.id == item.port;
              });
            }
            return tIndex >= 0 && cIndex >= 0;
          });
        } else {
          this.problems = [];
        }
      });
    },
    getClassifHelp(piece, port) {
      let data = {
        piece,
        port,
      };
      getHelp(data).then((res) => {
        if (res.code == 200 && res.data) {
          this.problems = res.data;
        } else {
          this.problems = [];
        }
      });
    },
    checkClassif(typeId, classifId) {
      this.checkedTypeId = typeId;
      this.checkClassifId = classifId;
      this.activeNames = [];
      this.getClassifHelp(typeId, classifId);
    },
    checkHotPro() {
      this.checkedTypeId = "";
      this.checkClassifId = "";
      this.activeNames = [];
      this.getHotHelp();
    },
    querySearch(queryString, cb) {
      let data = {};
      if (queryString) {
        data = {
          title: queryString,
        };
      } else {
        data = {
          isHotspot: 1,
        };
      }
      getHelp(data).then((res) => {
        if (res.code == 200 && res.data) {
          // let filterPro = res.data;
          cb(
            res.data
              .filter((item) => {
                let tIndex = -1;
                let cIndex = -1;
                tIndex = this.menus.findIndex((mean) => {
                  return mean.id == item.piece;
                });
                if (tIndex >= 0) {
                  cIndex = this.menus[tIndex].children.findIndex((mean) => {
                    return mean.id == item.port;
                  });
                }
                return tIndex >= 0 && cIndex >= 0;
              })
              .map((item) => {
                return {
                  value: item.title,
                  id: item.id,
                  piece: item.piece,
                  port: item.port,
                };
              })
          );
        } else {
          cb([]);
        }
      });
    },
    handleSelect(data) {
      this.checkClassif(data.piece, data.port);
      this.activeName = data.piece + "";
      this.activeNames = [data.id];
    },
    goBack() {
      if (this.$route.query.link) {
        window.location.replace(this.$route.query.link);
      } else {
        window.history.back(-1); //返回上一页
      }
    },
  },
  created() {
    this.getHotHelp();
  },
};
</script>
